<template>
    <div>
        高级组件展示
        <p v-color="myColor">高级组件的第一个p标签</p>

        <p v-bcolor="myBcolor">高级组件的第二个p标签</p>
        <table>
            <thead>
              <th>ID</th>
              <th>姓名</th>
              <th>年龄</th>
            </thead>
            <tbody>

              <div
                v-for="user in list"
                :user="user"
                :key="user.id"
              >
              <slot
                name="showTable"
                v-bind="user"
              >
              </slot>
                    <!-- <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.age }}</td> -->
              </div>

            </tbody>
        </table>
    </div>
</template>

<script>
export default {
  name: 'MyHight',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      myColor: 'blue',
      myBcolor: 'yellow'
    }
  },
  methods: {

  },
  deactivated () {
    console.log('myhigh组件被缓存了')
  },
  activated () {
    console.log('myhigh组件被激活了')
  },
  created () {
    console.log('myhigh组件被创建了')
  },
  destroyed () {
    console.log('myhigh组件被销毁了')
  },
  directives: {
    color (ele, binding) {
      ele.style.backgroundColor = binding.value
    }
  }
}

</script>

<style scoped>
    div{
        color: red;
    }

</style>
